<template>
  <div>
    <!-- <button @click="getData">获取数据</button> -->
    <input type="text" name="" v-model="newItem" @keydown.enter="addItem">
    <h4>未完成：</h4>
    <ul v-for="(item, index) in items" :key="item.id">
      <li v-if="item.state==0">
        <el-checkbox :label="item.name" @change="complateItem(index)"></el-checkbox>
      </li>
    </ul>
    <h4>已完成：</h4>
    <ul v-for="(item, index) in items" :key="item.id">
      <li v-if="item.state==1">{{ item.name }} <span @click="deleteItem(index)">删除</span></li>
    </ul> 
  </div>
</template>

<script setup>
  import { ElCheckbox } from 'element-plus'
  import { ref } from 'vue'
  // import axios from 'axios'
  import request from '@/utils/request'
  var newItem = ref("")
  var items = ref([
    {
      id: 1,
      name: 'vue',
      state: 1
    },{
      id: 2,
      name: 'react',
      state: 0
    },{
      id: 3,
      name: 'javascript',
      state: 0
    }
  ])
  
  // 添加item
  function addItem(){
    console.log(items.value)
    let item = {
      id: items.value.length+1,
      name: newItem.value,
      state: 0
    }
    console.log(item)
    items.value.splice(0,0,item)
    newItem.value = ''
  }

  // 完成item
  function complateItem(index){
    items.value[index].state = 1
  }

  // 删除item
  function deleteItem(index){
    items.value.splice(index,1)
  }
  function getData(){
    // request.get('https://api.github.com/users')
    //   .then(res=>{
    //     console.log(res)
    // })
    request.get("/api/getUsers").then(res=>{console.log(res)})
  }
</script>

<style lang="scss" scoped>
ul{
  li{
    list-style: none;
  }
}
</style>  